<!DOCTYPE html>
<html>
<head>
	<title>数字时钟</title>
	<meta charset="utf-8">
	<style type="text/css">
		*{ margin:0px; padding: 0px; }
		body{ 
			text-align: center;
			background: #000; }
		#date{
			width:900px;
			margin:50px auto;
			border:3px solid green;
			height: 100px;
			font-size: 60px;
			color:#fff;
			line-height: 100px;
		}

		#time{
			width:300px;
			margin:50px auto;
			border:3px solid red;
			height: 100px;
			font-size: 40px;
			color:#fff;
			line-height: 100px;
		}
	</style>
	<script type="text/javascript">
		window.onload = function(){
			// 1.获取节点
			var dateBox = document.getElementById("date");
			// console.log(dateBox);//检测节点是否获取
			var timeBox = document.getElementById("time");
			// console.log(timeBox);//检测节点是否获取

			function clock(){
				// 2.给盒子内写入内容
				// 2-1 创建当前日期对象
				var today = new Date();
				// 优化① 把月份换成大写的
				// var month = today.getMonth()+1;
				// // 方法一：用switch判断
				// switch(month){
				// 	case 1:
				// 	month = "一";
				// 	break;
				// 	case 8:
				// 	month = "八";
				// 	break;
				// }
				// 方法二：用数组（思考）
				var yue = ["一","二","三","四","五","六","七","八","九","十","十一","十二"]
				//数组方法，注意获取的月份不加1，因为数组的索引和月份都是从零开始的
				// 星期的转换
				var week = ["日","一","二","三","四","五","六"]

				// 优化：把月和星期合并一个数组，统一调用
				var zong = ["日","一","二","三","四","五","六","七","八","九","十","十一","十二"]

				// 时分秒 0-9前面补位0
				var sec = today.getSeconds();//存放秒数
				// if(sec<10){
				// 	sec  = "0" + sec;
				// }
				// 条件?条件为真执行的代码:条件为假执行的代码
				sec = sec<10?("0" + sec):sec;


				// 2-2 dateBox内写入年月日星期
				// dateBox.innerHTML = today.getFullYear() + "年" +"&nbsp;" + yue[today.getMonth()] + "月" +"&nbsp;" + today.getDate()+ "日" +"&nbsp;" + "星期" + week[today.getDay()];
				// 调用总的数组
				dateBox.innerHTML = today.getFullYear() + "年" +"&nbsp;" + zong[today.getMonth()+1] + "月" +"&nbsp;" + today.getDate()+ "日" +"&nbsp;" + "星期" + zong[today.getDay()];

	 			// 2-3 timeBox内写入时分秒
	 			timeBox.innerHTML = today.getHours() + ":" +  today.getMinutes() + ":" + sec;
			}
			

 			// 3.让时间动起来
 			var t = setInterval(clock,1000);//开启定时器

 			// 4.点击按钮，停止更新
 			var btn = document.getElementById("btn");
 			btn.onclick = function(){
 				clearInterval(t);
 			}

 			// 5.点击继续按钮，继续更新
 			var btn2 = document.getElementById("btn2");
 			btn2.onclick = function(){
 				t = setInterval(clock,1000);
 			}

 			// 定时器的内容
 			// var num = 0;
 			// function can(){
 			// 	num++;
 			// 	console.log(num)
 			// }

 			// var t = setInterval(can,1000);//开启定时器
 			// var btn = document.getElementById("btn");
 			// btn.onclick = function(){
 			// 	clearInterval(t);
 			// }
 			
		}//加载函数
	</script>
</head>
<body>
	<div id="date"></div>
	<div id="time"></div>
	<button id="btn">停止更新</button>
	<button id="btn2">继续</button>

	<!-- 要点：
	1.书写一个项目，首先分析html的结构，然后写css样式，最后写js
	2.js放在head内，必须先写加载函数，所有的js代码都写在加载函数内部
	3.先获取节点（标签）
	 -->
</body>
</html>